<template>
  <div class="user">
    <!-- 用户头部 -->
    <div class="user-header">
      <img :src="avatar" alt="">
      <div class="user-info">
        <div class="user-name" v-text="nickname"></div>
        <div class="user-id" v-text="uid"></div>
      </div>
      <van-icon name="setting-o" />
    </div>
    <!-- 用户详情菜单区域，通过 CellGroup 的 inset 属性，可以将单元格转换为圆角卡片风格 -->
    <van-cell-group inset class="user-menu">
      <van-cell title="收藏" :value="collectCount" />
      <van-cell title="积分" :value="integral" />
      <van-cell title="优惠券" :value="couponCount" />
      <van-cell title="余额" :value="nowMoney" />
    </van-cell-group>
    <!-- 订单中心 -->
    <van-cell-group inset class="user-order">
      <van-cell title="订单中心" value="查看全部" is-link />
      <van-grid :column-num="5" :border="false">
        <van-grid-item icon="bill-o" text="待付款" />
        <van-grid-item icon="tosend" text="待发货" />
        <van-grid-item icon="logistics" text="待收货" />
        <van-grid-item icon="comment-o" text="待评价" />
        <van-grid-item icon="sign" text="已完成" />
      </van-grid>
    </van-cell-group>
    <!-- 公共底部导航 -->
    <LayoutFooter></LayoutFooter>
  </div>
</template>
<script setup>
import LayoutFooter from '@/components/LayoutFooter.vue'
import { getUserInfo } from '@/api/user.js'
import { ref, computed } from 'vue'

// 1. 声明变量，存储用户信息
const userInfo = ref({})
// 2. 通过计算属性，得到对应的数据，简化变量书写，而且数据更新时，触发计算属性从而更新视图
// 2.1 用户头像
const avatar = computed(() => userInfo.value?.switchUserInfo?.[0].avatar || 'https://qiniu.crmeb.net/attach/2021/09/02d9e202109101106364468.png')
// 2.2 用户昵称
const nickname = computed(() => userInfo.value?.nickname?.toString() || '未知')
// 2.3 用户 id
const uid = computed(() => 'ID: ' + (userInfo.value?.uid?.toString() || '3'))
// 2.4 收藏数
const collectCount = computed(() => userInfo.value?.collectCount?.toString() || '3')
// 2.5 积分
const integral = computed(() => userInfo.value?.integral?.toString() || '15003')
// 2.6 优惠券个数
const couponCount = computed(() => userInfo.value?.couponCount?.toString() || '5')
// 2.7 余额
const nowMoney = computed(() => userInfo.value?.now_money?.toString() || '99999.00')

// 3. 发送请求，获取用户信息
const initUserInfo = async () => {
  const { data } = await getUserInfo()
  userInfo.value = data.data
}
initUserInfo()
</script>
<style lang="scss" scoped>
.user {
  height: 100%;
  background: radial-gradient(circle at 50% -10%, #FBC546 72%, #F6F7F9 72%) #F6F7F9 0 -350px no-repeat;
  padding: 15px 0;
  // ----- 用户头部 -------------
  .user-header {
    padding: 0 15px 15px;
    display: flex;
    align-items: center;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .user-info {
      // 中间撑开，两边元素是固定的宽度
      flex: 1;
      .user-name {
        font-size: 14px;
        font-weight: 700;
        padding-bottom: 6px;
      }
      .user-id {
        font-size: 10px;
      }
    }
  }
  // ----- 用户详情菜单区域 ------
  .user-menu {
    margin-bottom: 10px;
    :deep(.van-cell) {
      display: inline-block;
      text-align: center;
      width: 25%;
      padding: 20px 5px 5px;
      &::after {
        border-bottom: 0;
      }
      .van-cell__title {
        line-height: 1.2;
        font-size: 14px;
      }
      .van-cell__value {
        text-align: center;
        font-size: 10px;
        // 避免内容没有加载出来时，标题文字出现短暂的塌陷
        min-height: 24px;
      }
    }
  }
  // ----- 订单中心 -------------
}
</style>
